<template>
  <a-tabs v-model:active="state.active" useScroll height="44px">
    <a-tab-pane
      v-for="(item, index) in state.tabNavs"
      :key="index"
      :label="item.label"
      :name="index"
    >
      <component :is="`TabsDemo${index}`" />
    </a-tab-pane>
  </a-tabs>
</template>

<script>
import { reactive } from "@vue/reactivity";
import ATabs from "../../../package/components/tabs/tabs.jsx";
import ATabPane from "../../../package/components/tabs/tabPane.jsx";
import TabsDemo0 from "./TabsDemo0.vue";
import TabsDemo1 from "./TabsDemo1.vue";
import TabsDemo2 from "./TabsDemo2.vue";
import TabsDemo3 from "./TabsDemo3.vue";
import TabsDemo4 from "./TabsDemo4.vue";
import TabsDemo5 from "./TabsDemo5.vue";

export default {
  components: {
    ATabs,
    ATabPane,
    TabsDemo0,
    TabsDemo1,
    TabsDemo2,
    TabsDemo3,
    TabsDemo4,
    TabsDemo5,
  },
  setup() {
    const state = reactive({
      active: 0,
      tabNavs: new Array(6)
        .fill("")
        .map((_, i) => ({ label: "我是标签" + i, name: i, content: "内容" + i })),
    });
    return {
      state,
    };
  },
};
</script>